<template>
    <svg
        :class="['svg-icon']"
        :style="{
            width: iconSize + 'px',
            height: iconSize + 'px',
        }"
        aria-hidden="true"
    >
        <use :href="'#icon-' + name" :fill="color" />
    </svg>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'SvgIcon',
    props: {
        name: {
            type: String,
            required: true,
            default: 'education',
        },
        color: {
            type: String,
            default: '',
        },
        iconSize: {
            type: [Number, String],
            default: 14,
        },
    },
    setup() {
        return {};
    },
});
</script>

<style scope>
.svg-icon {
    width: 14px;
    height: 14px;
    margin-right: 10px;
    fill: currentColor;
    vertical-align: middle;
}
</style>
